<template>
    <div>
        <!-- 就诊人组件的静态结构 -->
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>就诊人管理</span>
                    <el-button type="success" :icon="User" @click="addUser">添加就诊人</el-button>
                </div>
            </template>
            <!-- 就诊人管理就诊信息的结构 -->
            <div class="visitors" v-if="scene === 0">
                <Visitor @removeUser="removeUser" @changeScene="changeScene" class="item" v-for="(user, index) in userInfo" :key="user.id"
                    :index="index" :user="user"></Visitor>
            </div>
            <!-- 添加就诊人 修改就诊人的结构 -->
            <div class="from" v-if="scene === 1">
                <el-divider content-position="left">就诊人信息</el-divider>
                <!-- 第一个表单 -->
                <el-form style="margin: 10px auto; width:60%">
                    <el-form-item label="用户姓名">
                        <el-input placeholder="请你输入用户的姓名" v-model="userParams.name" />
                    </el-form-item>
                    <el-form-item label="证件类型">
                        <el-select placeholder="请选择你的证件类型" v-model="userParams.certificatesType">
                            <el-option v-for="item in certationType" :key="item.key" :label="item.name"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="证件号码">
                        <el-input placeholder="请你输入证件号码" v-model="userParams.certificatesNo" />
                    </el-form-item>
                    <el-form-item label="用户性别">
                        <el-radio-group v-model="userParams.sex">
                            <el-radio :label="1">女</el-radio>
                            <el-radio :label="0">男</el-radio>
                        </el-radio-group>

                    </el-form-item>
                    <el-form-item label="出生日期">
                        <el-date-picker type="date" placeholder="请你选择日期" v-model="userParams.birthdate"
                            value-format="YYYY-MM-DD" />
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input placeholder="请你输入手机号码" v-model="userParams.phone" />
                    </el-form-item>
                </el-form>

                <el-divider content-position="left">建档信息</el-divider>
                <!-- 第二个表单 -->
                <el-form style="margin: 10px auto; width:60%">
                    <el-form-item label="婚姻状况">
                        <el-radio-group v-model="userParams.isMarry">
                            <el-radio :label="1">已婚</el-radio>
                            <el-radio :label="0">未婚</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="自费/医保">
                        <el-radio-group v-model="userParams.isInsure">
                            <el-radio :label="1">自费</el-radio>
                            <el-radio :label="0">医保</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="当前住址">
                        <el-cascader :props="props" />
                    </el-form-item>
                    <el-form-item label="详细地址">
                        <el-input placeholder="请你输入详细地址" v-model="userParams.address" />
                    </el-form-item>
                </el-form>

                <el-divider content-position="left">联系人信息</el-divider>
                <!-- 第三个表单 -->
                <el-form style="margin: 10px auto; width:60%" label-width="80px">
                    <el-form-item label="用户姓名">
                        <el-input placeholder="请你输用户姓名" v-model="userParams.name" />
                    </el-form-item>
                    <el-form-item label="证件类型">
                        <el-select placeholder="请选择你的证件类型" v-model="userParams.contactsCertificatesType">
                            <el-option :label="item.name" v-for="item in certationType" :key="item.key"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="证件号码">
                        <el-input placeholder="请你输入证件号码" v-model="userParams.contactsCertificatesNo" />
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input placeholder="请你输入手机号码" v-model="userParams.phone" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submit">提交</el-button>
                        <el-button type="primary" @click="reset">重写</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { User } from '@element-plus/icons-vue'
import { reqGetUser } from '@/api/hospital'
import { reqCertationType, reqCity, reqAddUpdateUser } from '@/api/user';
import { onMounted, ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
let userInfo = ref<any>([])
// 定义一个数据决定卡片的身体部分的展示内容
let scene = ref<number>(0)
// 定义一个接收身份证类型的
let certationType = ref<any>([])
// 收集新增就诊人的数据
let userParams = reactive({
    name: '',
    certificatesType: '',
    certificatesNo: '',
    sex: '',
    birthdate: '',
    phone: '',
    isMarry: 0,
    isInsure: 0,
    addressSelected: [],
    address: '',
    contactsName: '',
    contactsCertificatesType: '',
    contactsCertificatesNo: '',
    contactsPhone: '',
    id: ''

})
let $router = useRouter()
let $route = useRoute()

onMounted(() => {
    getUser()
    // 获取证件类型
    getCertationType()
    // 判断当前路由组件是否是从挂号组件来的
    if ($route.query.type == 'add') {
        scene.value = 1
    }
    if ($route.query.type == 'edit') {
        scene.value = 1
    }
})
const getUser = async () => {
    const result: any = await reqGetUser()
    if (result.code === 200) {
        userInfo.value = result.data
    }
}
// 跳转到添加页面
const addUser = () => {
    reset()
    scene.value = 1
}
// 就诊人自定义事件的回调
const changeScene = (user: any) => {
    scene.value = 1
    // 收集已有的就诊人信息
    Object.assign(userParams, user)
}
// 清空表单内容
const reset = () => {
    Object.assign(userParams, {
        name: '',
        certificatesType: '',
        certificatesNo: '',
        sex: '',
        birthdate: '',
        phone: '',
        isMarry: 0,
        isInsure: 0,
        addressSelected: [],
        address: '',
        contactsName: '',
        contactsCertificatesType: '',
        contactsCertificatesNo: '',
        contactsPhone: '',
        id: ''
    })
}
// 获取证件类型接口
const getCertationType = async () => {
    const result: any = await reqCertationType()
    if (result.code === 200) {
        certationType.value = result.data
    }
}
// 加载级联选择器
const props: any = {
    lazy: true, //懒加载数据
    //加载级联选择器的数据方法
    async lazyLoad(node: any, resolve: any) {
        // 加载联级选择器数据方法
        const result: any = await reqCity(node.data.id || '86')
        let showData: any = result.data.map(((item: any) => {

            return {
                id: item.id,
                label: item.name,
                value: item.value,
                leaf: !item.hasChildren
            }
        }))
        // 注入组件需要展示的数据
        resolve(showData)
    },
}
// 提交表单的函数
const submit = async () => {
    try {
        // 要么新增就诊人||更新一个已有的就诊人
        await reqAddUpdateUser(userParams)


        ElMessage({
            type: 'success',
            message: userParams.id ? '更新成功' : '添加成功'
        })
        // 切换场景为零
        if ($route.query.type == 'add') {
            $router.back()
        } else {
            scene.value = 0

        }
        getUser()
    } catch (error) {
        ElMessage({
            type: 'error',
            message: '操作失败'
        })
    }
}
//监听器
watch(() => userInfo.value, () => {
    if ($route.query.type == 'edit') {
        let user = userInfo.value.find((item: any) => {
            return item.id == $route.query.id
        })
        Object.assign(userParams,user)
    }
})
// 自定义事件，删除事件的触发
const removeUser = ()=>{
    getUser();
}
</script>

<style scoped lang="scss">
.card-header {
    display: flex;
    justify-content: space-between;
}

.visitors {
    display: flex;
    flex-wrap: wrap;

    .item {
        width: 32%;
    }
}
</style>